<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <title>使用JSX语法</title>
    <!-- 1. 引入react核心库 -->
    <script src="./node_modules/react/umd/react.development.js"></script>
    <!-- 2. 引入react-dom 用于支持react操作dom -->
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="./node_modules/@babel/standalone/babel.min.js"></script>
    <div id="box"></div>
    <script type="text/babel">
        let count=100
        let a=20
        let msg='你好React'
        let arr=[1,2,3]
        let obj={
            name:'zhangsan',
            age:18
        }
        let isShow =true 
        let other=null
        let other1=undefined
        let p1=<p>这是一个用jsx语法写的段落<span style={{color:'red'}}>红色</span></p>
        let item =<>
            <div className='item'>
                <h2 className='title'>中奖列表</h2>   
                <p>总数：{count}</p>
                <hr/>
                {}
            </div>
            <h2>表达式</h2>
            <ul>
         <li>a: {a}</li>
         <li>a+count: {a+count}</li>
         <li>msg: {msg}</li>
         <li>arr-map: {arr.map(item => item+2)}</li>
         <li>obj：{obj.name}-{obj.age}</li>
         <li>jsx本身是一个表达式: {p1}</li>
         <li>isShow: {isShow ? '显示': '隐藏'}</li>
         <li>null: {other}</li>
         <li>undefined: {other1}</li>
       </ul>
       <h2>语句</h2>
       <p>
         
         {
            "(1).if(){}"
         }
         <br />
         {
            "(2).for"
         }
         <br />
         
         {
            "(3).switch(){case 1:xxxx}"
         }
         
       </p>
        </>
    //  4. 创建根节点
       let root = ReactDOM.createRoot(document.getElementById('box'))
       // 5. 把虚拟dom渲染到页面中
          root.render(item)
        </script>
</head>
<body>
    
</body>
</html>